<template>
  <div class="count-panel-container">
    <el-col>
      <div class="count-content-header">
        <count-filter
          :tabIndex="tabIndex"
          :input-type="filterType"
          @handle-count="handleCount"
        ></count-filter>
      </div>
      <div class="count-content-main">
        <bs-main class="bs-main">
          <list
            ref="rightTable"
            class="right"
            :table-tag="filterType.typeName"
            :list-data="mediaList"
            :has-select="false"
            :list-cols="columns"
            :action-opts="actionOpts"
            :init-cols-props.sync="initColsProps"
            :init-headmune-flag="initHeadmuneFlag"
            height="calc(100vh - 400px)"
            @init-table="initTable"
            @sort="handleSort"
          ></list>
          <pagination
            slot="footer"
            :total="pageData.total"
            :page="pageData.page"
            :limit="pageData.limit"
            @pagination="handlePageCount"
          ></pagination>
        </bs-main>
      </div>
    </el-col>
  </div>
</template>
<script>
import CountFilter from './CountFilter'
import List from '@/components/List'
import Pagination from '@/components/Pagination'
import SystemApi from '@/api/system'

export default {
  name: 'CountPanel',
  components: { CountFilter, List, Pagination },
  props: {
    filterType: {
      type: Object,
      default: ()=> {}
    },
    columns: {
      type: Array,
      default: ()=> []
    },
    tabIndex: {
      type: String,
      default: '0'
    }
  },
  data() {
    return {
      pageData: {
        total: 0,
        page: 1,
        limit: 15,
      },
      mediaList: [],
      headerList: [],
      propList: [],
      initHeadmuneFlag: false,
      defaultCheckedKeys: [],
      contextMenuData: [],
      actionOpts: {
        show: false,
      },
      mediaRequest: {
        orderType: 1,
        ordersParam: 'DESC',
      },
      programRequest: {
        orderType: 1,
        ordersParam: 'DESC',
      },
      scanRequest: {
        orderType: 1,
        ordersParam: 'DESC',
      },
      mediaColsProps: ['terminalName', 'terminalMac', 'playCount'],
      programColsProps: ['terminalName', 'groupName', 'terminalMac','name','mediaCount','downloaded'],
      scanColsProps: ['mediaName', 'terminalMac', 'screenName', 'programName', 'carNo', 'scanCount'],
      initColsProps: [],
      currentForm: {}
    }
  },
  computed: {
    type: {
      get() {
        return this.filterType
      },
    },
  },
  beforeMount() {
    this.initColsProps = this.mediaColsProps
  },
  watch: {
    tabIndex(val) {
      if(Number(val) === 0) {
        this.initColsProps = this.mediaColsProps
      } else if(Number(val) === 1) { 
        this.initColsProps = this.programColsProps
      } else if(Number(val) === 2) { 
        this.initColsProps = this.scanColsProps
      }
    }
  },
  methods: {
    initTable() {
      this.initHeadmuneFlag = true
    },
    handleSort(sortInfo) {
      if (this.type.type == 0) {
        const index = this.mediaColsProps.findIndex(item => item === sortInfo.prop)
        this.mediaRequest.orderType = index + 1
        this.mediaRequest.ordersParam = sortInfo.type
        this.loadMediaCountList(this.currentForm)
      } else if (this.type.type == 1) {
        const index = this.programColsProps.findIndex(item => item === sortInfo.prop)
        this.programRequest.orderType = index + 1
        this.programRequest.ordersParam = sortInfo.type
        this.loadProgramCountList(this.currentForm)
      } else if(this.type.type === 2) {
        const index = this.scanColsProps.findIndex(item => item === sortInfo.prop)
        this.scanRequest.orderType = index + 1
        this.scanRequest.ordersParam = sortInfo.type
        this.loadScanCountList(this.currentForm)
      }
    },
    handleCount(form) {
      this.currentForm = form
      this.handlePageCount()
    },

    handlePageCount(current) {
      if(current) {
        this.pageData = {
          ...this.pageData,
          ...current
        }
      }
      if (this.type.type == 0) {
        this.loadMediaCountList(this.currentForm)
      } else if (this.type.type == 1) {
        this.loadProgramCountList(this.currentForm)
      } else if(this.type.type === 2) {
        this.loadScanCountList(this.currentForm)
      }
    },

    async loadMediaCountList(form) {
      if (
        form.resGroup === null ||
        typeof form.resGroup === 'undefined' ||
        form.resGroup === ''
      ) {
        this.$alert(this.$t('提示'), this.$t('请先选择正确的媒体分组'))
        return
      }
      if (!form.resName) {
        this.$alert(this.$t('提示'), this.$t('请先选择正确的资源'))
        return
      }
      if (!form.terminalList || form.terminalList.length === 0) {
        this.$alert(this.$t('提示'), this.$t('请先选择终端分组'))
        return
      }
      if (!form.startDate || form.startDate === null) {
        this.$alert(this.$t('提示'), this.$t('请选择开始时间'))
        return
      }
      const startTime = new Date(form.startDate).getTime()
      const endTime = new Date(form.endDate).getTime()
      if (startTime > endTime) {
        this.$alert(this.$t('提示'), this.$t('开始时间不能大于结束时间'))
        return
      }
      this.mediaRequest.beginDate = form.startDate
      this.mediaRequest.endDate = form.endDate
      this.mediaRequest.mediaGroupId = form.resGroup
      this.mediaRequest.mediaResourcesId = form.resName
      this.mediaRequest.terminalGroupIds = form.terminalList
      this.mediaRequest.current = this.pageData.page
      this.mediaRequest.size = this.pageData.limit
      const res = await SystemApi.loadMediaPlayCount(this.mediaRequest)
      if (res.data) {
        this.mediaList = res.data.records ? res.data.records : []
        this.pageData.total = res.data.total ? Number(res.data.total) : 0
      }
    },
    async loadProgramCountList(form) {
      if (
        form.resGroup === null ||
        typeof form.resGroup === 'undefined' ||
        form.resGroup === ''
      ) {
        this.$alert(this.$t('提示'), this.$t('请先选择正确的节目分组'))
        return
      }
      if (!form.resName) {
        this.$alert(this.$t('提示'), this.$t('请先选择正确的资源'))
        return
      }
      if (!form.terminalList || form.terminalList.length === 0) {
        this.$alert(this.$t('提示'), this.$t('请先选择终端分组'))
        return
      }
      if (!form.startDate || form.startDate === null) {
        this.$alert(this.$t('提示'), this.$t('请选择开始时间'))
        return
      }
      const startTime = new Date(form.startDate).getTime()
      const endTime = new Date(form.endDate).getTime()
      if (startTime > endTime) {
        this.$alert(this.$t('提示'), this.$t('开始时间不能大于结束时间'))
        return
      }
      this.programRequest.beginDate = form.startDate
      this.programRequest.endDate = form.endDate
      this.programRequest.programGroupId = form.resGroup
      this.programRequest.programResourcesId = form.resName
      this.programRequest.terminalGroupIds = form.terminalList
      this.programRequest.current = this.pageData.page
      this.programRequest.size = this.pageData.limit
      const res = await SystemApi.loadProgramDownloadCount(this.programRequest)
      if (res.data) {
        this.mediaList = res.data.records ? res.data.records : []
        this.pageData.total = res.data.total ? Number(res.data.total) : 0
      }
    },
    validataForm(form) {
      if (
        form.resGroup === null ||
        typeof form.resGroup === 'undefined' ||
        form.resGroup === ''
      ) {
        this.$alert(this.$t('提示'), this.$t('请先选择正确的节目分组'))
        return false
      }
      if (!form.resName) {
        this.$alert(this.$t('提示'), this.$t('请先选择正确的资源'))
        return false
      }
      if (!form.terminalList || form.terminalList.length === 0) {
        this.$alert(this.$t('提示'), this.$t('请先选择终端分组'))
        return false
      }
      if (!form.startDate || form.startDate === null) {
        this.$alert(this.$t('提示'), this.$t('请选择开始时间'))
        return false
      }
      const startTime = new Date(form.startDate).getTime()
      const endTime = new Date(form.endDate).getTime()
      if (startTime > endTime) {
        this.$alert(this.$t('提示'), this.$t('开始时间不能大于结束时间'))
        return false
      }
      return true
    },
    async loadScanCountList(form) {
      if(this.validataForm(form)) {
        this.scanRequest.beginDate = form.startDate
        this.scanRequest.endDate = form.endDate
        // this.scanRequest.programId = form.resGroup
        this.scanRequest.programId = form.resName
        this.scanRequest.terminalGroupIds = form.terminalList
        this.scanRequest.current = this.pageData.page
        this.scanRequest.size = this.pageData.limit
        const res = await SystemApi.loadUserScanCount(this.scanRequest)
        if (res.data) {
          this.mediaList = res.data.records ? res.data.records : []
          this.pageData.total = res.data.total ? Number(res.data.total) : 0
        }
      }
    }
  },
}
</script>

<style lang="scss" scoped>
// import '@/styles/bs-common.scss';
.count-panel-container {
  padding: 20px 0px;
}
.count-content-header {
  height: 150px;
  padding: 0px 10px;
}

.count-content-main {
  margin-right: 200px;
  ::v-deep .bs-main-layout__footer {
    border-top: 0px solid #e9e9e9;
  }
}
::v-deep .el-input--medium .el-input__icon {
  line-height: 30px !important;
}
::v-deep .el-input__suffix {
  height: 30px !important;
  line-height: 30px !important;
}
</style>